<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container p-5 bg-primary text-white text-center">
  <h1>我的第一张 Bootstrap 页面</h1>
  <p>请调整这张响应式页面的大小以查看效果！</p> 
</div>

<div class="container p-5 bg-dark text-white mt-5">
  <div class="row">
    <div class="col-sm-6">
      <h3>列 1</h3>
      <p>胜日寻芳泗水滨，无边光景一时新。</p>
      <p>等闲识得东风面，万紫千红总是春。</p>
    </div>
    <div class="col-2">
      <h3>列 2</h3>
      <p>纷纷红紫已成尘，布谷声中夏令新。</p>
      <p>夹路桑麻行不尽，始知身是太平人。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3</h3>        
      <p>远上寒山石径斜，白云生处有人家。</p>
      <p>停车坐爱枫林晚，霜叶红于二月花。</p>
    </div>
  </div>
</div>
<div class="container mt-3">
    <h2>卡片图像</h2>
    <p>图像在上方 (card-img-top)：</p>
    <div class="card" style="width:400px">
      <img class="card-img-top" src="/i/css/avatar.png" alt="Card image" style="width:100%">
      <div class="card-body">
        <h4 class="card-title" th:text="${user.userName}">Bill Gates</h4>
        <p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
        <a href="#" class="btn btn-primary">查看个人资料</a>
      </div>
    </div>


<h1>diyibiaot</h1>

 <div class="input-group mb-3 input-group-lg">
   <span class="input-group-text">用户名</span>
   <input type="text" class="form-control">
 </div>
 <div class="input-group mb-3 input-group-lg">
    <span class="input-group-text">密码</span>
    <input type="password" class="form-control">
  </div>


  <form action="/action_page.php" class="was-validated">
    <div class="mb-3 mt-3">
      <label for="uname" class="form-label">用户名：</label>
      <input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required>
      <div class="valid-feedback">有效的。</div>
      <div class="invalid-feedback" hidden> 请填写此字段。</div>
    </div>
    <div class="mb-3">
      <label for="pwd" class="form-label">密码：</label>
      <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
      <div class="valid-feedback">有效的。</div>
      <div class="${username}?"":invalid-feedback">请填写此字段。</div>
    </div>
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" id="myCheck" name="remember">
      <label class="form-check-label" for="myCheck">我同意这些条款。</label>
      <div class="valid-feedback">有效的。</div>
      <div class="invalid-feedback">选中此复选框以继续。</div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>

  <button class="btn btn-warning" onclick="change()">点击</button>

  <script>

    function change(){
        
        document.querySelector("#pwd").required = true;
    }

  </script>
</body>
</html>